<template>
  <div class="chart-container" ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    signalStrength: {
      type: Number,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  watch: {
    signalStrength() {
      this.initChart(); // 重新渲染图表
    }
  },
  methods: {
    initChart() {
      // 获取 DOM 容器
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      // 配置 ECharts 图表
      var category = [
        {
          name: "1",
          value: 60,
        },
      ]; // 类别
      var total = 100; // 数据总数
      var datas = [];
      category.forEach((value) => {
        datas.push(value.value);
      });
      let option = {
        backgroundColor: "trasparent",
        xAxis: {
          max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 100,
          top: 100, // 设置条形图的边距
          right: 150,
          bottom: 100,
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: ["一级防线"],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              verticalAlign: "bottom",
              align: "left",
              padding: [10, 10, 30, 10],
              textStyle: {
                fontSize: 14,
                color: "white",
              },
              formatter(value, index) {
                return value;
              },
            },
          },
        ],
        series: [
          {
            // total count bar
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#07314a",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbolClip: true,
            symbolSize: [50, 18],
            symbolPosition: "start",
            symbolOffset: [3, -4],
            symbolBoundingData: this.total,
            data: [total],
            z: 2,
            animationEasing: "elasticOut",
          },
          {
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#70faf2",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbol: "roundRect",
            symbolClip: true,
            symbolSize: [50, 18],
            symbolPosition: "start",
            symbolOffset: [3, -4],
            symbolBoundingData: this.total,
            data: datas,
            z: 2,
            animationEasing: "elasticOut",
          },

          {
            // label
            type: "pictorialBar",
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: "none",
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  var text;
                  text = "{f| " + params.data + "个}";
                  return text;
                },
                rich: {
                  f: {
                    color: "#ffffff",
                  },
                },
                position: "right",
                distance: 10, // 向右偏移位置
                show: true,
              },
            },
            data: datas,
            z: 0,
          },

          // {
          //   name: "外框",
          //   type: "bar",
          //   barGap: "-130%", // 设置外框粗细
          //   data: [total, total, total],
          //   barWidth: 45,
          //   itemStyle: {
          //     normal: {
          //       barBorderRadius: [5, 5, 5],
          //       color: "transparent", // 填充色
          //       barBorderColor: "#1588D1", // 边框色
          //       barBorderWidth: 0, // 边框宽度
          //     },
          //   },
          //   z: 0,
          // },
        ],
      };


      // 渲染图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 300px;
}
</style>
